<template>
  <!-- 城市  工作经验  学历  技能 -->
  <el-form ref="form" :model="form" label-width="80px">

    <el-form-item label="选择城市">
      <el-select v-model="form.city" placeholder="请选择城市">
        <el-option label="太原" value="1"></el-option>
        <el-option label="北京" value="2"></el-option>
      </el-select>
    </el-form-item>

    <el-form-item label="工作年限">
      <el-select v-model="form.workage" placeholder="工作年限">
        <el-option label="1年" value="1"> </el-option>
        <el-option label="2年" value="2"></el-option>
        <el-option label="3年" value="3"></el-option>
        <el-option label="4年" value="4"></el-option>
      </el-select>
    </el-form-item>

    <el-form-item label="选择学历">
      <el-select v-model="form.education" placeholder="选择学历">
        <el-option label="专科" value="1"> </el-option>
        <el-option label="本科" value="2"></el-option>
        <el-option label="硕士" value="3"></el-option>
        <el-option label="博士" value="4"></el-option>
        <el-option label="不限" value="0"></el-option>
      </el-select>
    </el-form-item>

    <el-form-item label="选择技能">
      <el-checkbox-group v-model="form.skills">
        <el-checkbox :label="item[1]" name="type" v-for="item in opts" :key="item[1]"> {{item[0]}}</el-checkbox>
      </el-checkbox-group>
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="onSubmit">立即预测</el-button>
      <el-button @click="onReset">重置</el-button>
    </el-form-item>
    <div> 预测薪资:{{salary}}</div>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        city: '',
        workage: '',
        education: '',
        skills: []
      },
      opts: [],
      salary: 0
    }
  },
  methods: {
    onSubmit() {
      let search = new URLSearchParams(this.form).toString()
      fetch("http://127.0.0.1:5000/predict?" + search)
        .then((response) => response.json())
        .then((data) => {
          this.salary = data
        })
    },
    onReset() {
      this.form.city = ''
      this.form.workage = ''
      this.form.education = ''
      this.form.skills = []
      this.salary = 0
    }
  },
  mounted() {
    fetch("http://127.0.0.1:5000/getSkillScore")
      .then((response) => response.json())
      .then((data) => {
        this.opts = data.slice(0, 10)
      })
  }
}
</script>

<style scoped>
/* Add your styles here */
</style>
